<template>
	<view style="">
		<button @click="onSetTimeCall()">onceTimerSetTimerOut</button>
		<button @click="onSetTimeCallxy(userName,password)">MutiTimerSetTimerOutxy</button>
		<button @click="onTimeoutCancel()" type="warn">cancelTimer</button>
		<button @click="onInteral()" type="primary">intervalLog</button>
		<button @click="onClearInter()" type="warn" plain="true">cancelInterval</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: `cyz`,
				password: 666666,
				timeOutId: null,
				count: 0,
				intervalId: null
			}
		},
		methods: {
			onSetTimeCall() {
				console.log("onSetTimeCall-->");
				// setTimeout(callback,ms,any[])
				// arrow function()=>{}
				this.timeOutId = setTimeout(() => {
					//delayCode
					console.log("i delay 2000ms");
				}, 3000)
			},
			onSetTimeCallxy(name, pwd) {
				console.log("onSetTimeCallxy-->name:" + name + ",pwd:" + pwd);
				// console.log("onSetTimeCallxy-->name:"+this.userName+",pwd:"+this.password);
				setTimeout((x, y) => {
					console.log("i can-->x:" + x + ",y:" + y);
				}, 2000, name, pwd)
			},
			onTimeoutCancel() {
				console.log("onTimeOutClear-->i cancel timer:" + this.timeOutId);
				clearTimeout(this.timeOutId);
			},
			onInteral() {
				this.intervalId = setInterval(() => {
					this.count++
					console.log("intervalLog count:", this.count);
				}, 1000)
			},
			onClearInter() {
				console.log("cancel interval timer");
				clearInterval(this.intervalId)
			}

		}
	}
</script>

<style>
	button {
		margin: 15rpx;
	}
</style>